<template>
  <div class="header">
    <div class="logo"><img src="../assets/logo.jpg"></div>
    <el-menu :default-active="activeIndex" class="el-menu-demo nav" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1"><router-link to=''>思维创意</router-link></el-menu-item>
      <el-menu-item index="1"><router-link to=''>大牌精选</router-link></el-menu-item>
      <el-menu-item index="1"><router-link to=''>全球聚合</router-link></el-menu-item>
      <el-menu-item index="1"><router-link to=''>品牌汇集</router-link></el-menu-item>
      <el-menu-item index="1"><router-link to=''>设计工坊</router-link></el-menu-item>
      <el-menu-item index="1"><router-link to=''>VIP专区</router-link></el-menu-item>
    </el-menu>
    <div class="user">
      <router-link to='' class="login">登陆</router-link>
      <router-link to='' class="register">注册</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderBox',
  props: {
    msg: String
  },
  data() {
    return {
      activeIndex: '',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      alert(key, keyPath)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  background-color: #000000;
  padding: 0 30px;
}
.logo {
  height: 100px;
  width: auto;
  padding-left: 100px;
}
.nav {
  background-color: #000000;
}
.el-menu--horizontal>.el-menu-item{
  color: #ffffff;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  padding: 0 30px;
}
.user {
  font-size: 16px;
  color: #ffffff
}
.user a {
  color: #ffffff;
  padding: 0 20px;
}
.user a:first-child {
  border-right: 1px solid #ffffff
}
</style>
